<template>
    <view class="content">
        <pure-list v-model="list" :pageSize="pageSize" :loadPromise="queryList" ref="listRef">
            <view class="item" v-for="(item, index) in list" :key="index">{{ index + 1 }}</view>
        </pure-list>
    </view>
</template>

<script setup>
    import { ref, nextTick } from "vue";
    import { onReady, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";

    // 组件的引用
    const listRef = ref(null);

    // 列表数据
    const list = ref([]);

    // 每页数据长度
    const pageSize = 15;

    // 页面渲染完成后
    onReady(async () => {
        await nextTick();
        // 加载第一页数据
        listRef.value.load();
    });

    // 上拉加载
    onReachBottom(() => {
        listRef.value.load();
    });

    // 下拉刷新
    onPullDownRefresh(() => {
        listRef.value.refresh();
    });

    // 查询数据
    function queryList() {
        // 模拟查询数据
        // 需返回 Promise
        return new Promise((resolve) => {
            const newList = [];

            // 默认返回的数据长度小于pageSize，则被认为没有更多数据了
            // 这里模拟实现一下
            const size = list.value.length >= pageSize * 3 ? pageSize - 5 : pageSize;

            for (let i = 0; i < size; i++) {
                newList.push({
                    id: Math.random(),
                });
            }

            // 模拟接口返回的数据
            const result = {
                code: 0,
                errMsg: "请求成功",
                data: {
                    list: newList,
                },
            };

            setTimeout(() => {
                resolve(result);
            }, 1000);
        });
    }
</script>

<style scoped>
    .item {
        height: 50px;
        background: #ffffff;
        margin: 5px 0;
        border-radius: 5px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 0.75em;
        font-weight: bold;
    }
</style>
